<template>
  <div>
            <span style="letter-spacing:5px; background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
             -webkit-background-clip:text;  -webkit-text-fill-color:transparent; font-size: 20px ;background-color: #e8a400">
            <strong>{{ zzdw }}</strong>

          </span>
    <el-row style="height: 50vh;width: 100%;">

      <el-col :span="6" style="height: 100%">
        <div id="first" style="width: 100%;height: 100%;margin: 1%"></div>
      </el-col>
      <el-col :span="6" style="height: 100%">
        <div id="second" style="width: 100%;height: 100%;margin: 1%"></div>
      </el-col>
      <el-col :span="6" style="height: 100%">
        <div id="third" style="width: 100%;height: 100%;margin: 1%"></div>
      </el-col>
      <el-col :span="6" style="height: 100%">
        <div id="fourth" style="width: 100%;height: 100%;margin: 1%"></div>
      </el-col>

    </el-row>


    <el-row style="height: 60vh;width: 100%;margin: 1%">
      <el-col style="height: 60vh;">
        <el-table :data="objects" border>
          <el-table-column property="id" label="序号" :index="indexMethod" type="index"fixed ></el-table-column>
          <el-table-column property="sydw" label="所在单位" >
          </el-table-column>
          <el-table-column property="glzl" label="设备数量"></el-table-column>
          <el-table-column property="cyzq" label="承压蒸汽锅炉"></el-table-column>
          <el-table-column property="yjr" label="有机热载体锅炉"></el-table-column>
          <el-table-column property="cyrs" label="承压热水锅炉"></el-table-column>
          <el-table-column property="danger" label="风险状况">
            <template slot-scope="scope">
              <el-button type="text" style="text-decoration: underline; color: #606266" @click="getDialogTableData(scope.row.sydw)">
                查看
              </el-button>
              <el-dialog :visible.sync="dialogTableVisible">
                <el-table :data="dialogTableData" border>
                  <el-table-column property="id" :index="indexMethod" type="index" label="序号" fixed ></el-table-column>
                  <el-table-column property="sbdjh" label="设备登记号" ></el-table-column>
                  <el-table-column property="ccbh" label="出厂编号"></el-table-column>
                  <el-table-column property="sbxh" label="设备型号"></el-table-column>
                  <el-table-column property="xyyl" label="许用压力"></el-table-column>
                  <el-table-column property="ckwd" label="出口温度"></el-table-column>
                  <el-table-column property="zzrq" label="制造日期"></el-table-column>
                  <el-table-column property="yxsj" label="累计运行时间"></el-table-column>
                  <el-table-column property="sy" label="型式/耐压试验"></el-table-column>
                </el-table>
                <el-pagination
                  background
                  :current-page="currentPage"
                  @size-change="pageSizeChange"
                  @current-change="pageChange"
                  :page-sizes="[10, 15, 20, 40]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="dialog_total"
                  style="display: flex;flex-direction: row;justify-content: flex-end;"
                >
                </el-pagination>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="currentPage"
          @size-change="pageSizeChange"
          @current-change="pageChange"
          :page-sizes="[10, 15, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="display: flex;flex-direction: row;justify-content: flex-end;"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import Breadcrumb from "../../BreadCrumb/BreadCrumb";
    import * as echarts from "echarts";
    import totalTable from '../../../../../assets/totalTable.json'

    export default {
        name: "detail",
      props: {
        zzdw: {
          type: String,
          default: ''
        }
      },

      data(){
          return{
            yali:{
              低压:0,
              中亚:0,
              次高压:0,
              高压:0,
              超临界:0,
              超超临界:0
            },
            dialog_total:"",
            area:{
              山东省:0,
              安徽省:0,
              吉林省:0,
              浙江省:0,
              河南省:0,
              河北省:0,
              山西省:0,
              江苏省:0,
              甘肃省:0
            },
            pie_objects:[],
            useYearNum:[],
            yearTable:[],
            useYear:[],
            dialogTableData:[],
            objects:[],
            sydwName:[],
            sydwInfo:[],
            tableData:[],
            sourceTable:[],
            tableTempData:[],
            dialogTableVisible:false,
            naviBasicItems: [{ text: '电站锅炉' }, { text: '制造单位', to: '/guolu/dataCloudService/zzdw' }],
            naviItems: [],
            loading: false,
            total:"",
            currentPage:1,
            pagesize:10,

          }
      },
      created() {
        (this.naviItems = [...this.naviBasicItems])

      },
      mounted() {
        this.sourceTable=totalTable;
        this.getFilterData(this.zzdw);
        this.getzzdwNum(this.zzdw);
        this.getFirst();
        this.showYear();
        this.showType();
        this.showYali();
        this.areaDistributeShow();
        this.topDevStatisticsShow();
        this.usedTimeShow();
        this.nominalVolStatisticsShow();
      },
      components: {
        Breadcrumb,
      },
      methods: {
        showType(){
          this.sourceTable=totalTable;
          let pie_obj={
            yjr:0,
            cyrs:0,
            cyzq:0
          }
          this.pie_objects.push(pie_obj);

          for(let i=0;i<this.sourceTable.length;i++){
            if((this.sourceTable[i].zzdw==this.zzdw)&&this.sourceTable[i].sblb=="有机热载体锅炉"){
              this.pie_objects[0].yjr+=1;
            }
            if((this.sourceTable[i].zzdw==this.zzdw)&&this.sourceTable[i].sblb=="承压热水锅炉"){
              this.pie_objects[0].cyrs+=1;
            }
            if((this.sourceTable[i].zzdw==this.zzdw)&&this.sourceTable[i].sblb=="承压蒸汽锅炉"){
              this.pie_objects[0].cyzq+=1;
            }

          }
        },
        showYear(){
          this.sourceTable=totalTable;
          let temp=[];
          for(let i=0;i<this.sourceTable.length;i++){
            if(this.sourceTable[i].zzdw==this.zzdw){
              temp.push(this.sourceTable[i].tyrq.slice(0,4));
            }
          }

          for(let j in temp){
            if(this.useYear.indexOf(temp[j])==-1){
              this.useYear.push(temp[j]);
            }
          }

          for(let q=0;q<this.useYear.length;q++){
            let year={
              year_in:"",
              num:0
            }
            year.year_in=this.useYear[q];
            this.yearTable.push(year);
          }

          for(let m=0;m<this.yearTable.length;m++){
            for(let n=0;n<this.tableData.length;n++){
              if(this.tableData[n].tyrq.slice(0,4)==this.yearTable[m].year_in){
                this.yearTable[m].num+=1;
              }
            }
          }

          for(let s=0;s<this.yearTable.length;s++){
            this.useYearNum[s]=this.yearTable[s].num;
          }

        },
          getFilterData(zzdw){
            for(let i in this.sourceTable){
              if(zzdw==this.sourceTable[i].zzdw){
                this.tableData.push(this.sourceTable[i]);
              }
            }
          //  console.log(this.tableData)
          },
        getzzdwNum(zzdw){
          for(let i in this.sourceTable){
            if(zzdw==this.sourceTable[i].zzdw){
              this.tableTempData.push(this.sourceTable[i]);
            }
          }
          for(let i in this.tableTempData){
            this.sydwName.push(this.tableTempData[i].sydw)
          }
          let temp=[];
          for (let j in this.sydwName){
            if(temp.indexOf(this.sydwName[j])==-1){
              temp.push(this.sydwName[j])
            }
          }
          // console.log(temp);
          for(let n in temp){
            for (let m in this.tableTempData){
              if(temp[n]==this.tableTempData[m].sydw){
                this.sydwInfo.push(this.tableTempData[m])
                break;
              }
            }
          }
          for(let i in this.sydwInfo){
            let object={
              sydw:"",
              glzl:0,
              cyzq:0,
              cyrs:0,
              yjr:0
            }
            object.sydw=this.sydwInfo[i].sydw;
            this.objects.push(object);
          }
          for(let i in this.objects) {

            for (let j in this.sourceTable) {
              if ((this.objects[i].sydw == this.sourceTable[j].sydw)&&(this.sourceTable[j].zzdw==this.zzdw)) {
                this.objects[i].glzl += 1;
              }
              if ((this.objects[i].sydw == this.sourceTable[j].sydw) && (this.sourceTable[j].sblb == "承压蒸汽锅炉")&&(this.sourceTable[j].zzdw==this.zzdw)) {
                this.objects[i].cyzq += 1;
              }
              if ((this.objects[i].sydw == this.sourceTable[j].sydw) && (this.sourceTable[j].sblb == "承压热水锅炉")&&(this.sourceTable[j].zzdw==this.zzdw)) {
                this.objects[i].cyrs += 1;
              }
              if ((this.objects[i].sydw == this.sourceTable[j].sydw) && (this.sourceTable[j].sblb == "有机热载体锅炉")&&(this.sourceTable[j].zzdw==this.zzdw)) {
                this.objects[i].yjr += 1;
              }
            }
          }
          this.total=this.objects.length;

        },
        getDialogTableData(sydw){
          this.dialogTableData=[];
          for(let i in this.sourceTable){
            if((sydw==this.sourceTable[i].sydw)&&(this.sourceTable[i].zzdw==this.zzdw)){
              this.dialogTableData.push(this.sourceTable[i]);
            }
          }
          this.dialog_total=this.dialogTableData.length;
          this.dialogTableVisible=true;
        },

        getFirst(){

          for(let i in this.tableData){
            console.log(this.tableData[i].sydwdz.slice(0,3));
            switch (this.tableData[i].sydwdz.slice(0,3)) {
              case "山东省":this.area.山东省+=1;break;
              case "安徽省":this.area.安徽省+=1;break;
              case "吉林省":this.area.吉林省+=1;break;
              case "浙江省":this.area.浙江省+=1;break;
              case "河南省":this.area.河南省+=1;break;
              case "河北省":this.area.河北省+=1;break;
              case "山西省":this.area.山西省+=1;break;
              case "江苏省":this.area.江苏省+=1;break;
              case "甘肃省":this.area.甘肃省+=1;break;
              default:break;
            }

          }
          console.log(this.area.安徽省);

        },
        showYali(){

          for(let p=0;p<this.tableData.length;p++){
            switch(this.tableData[p].ylfl){
              case "低压":this.yali.低压+=1;break;
              case "中亚":this.yali.中亚+=1;break;
              case "次高压":this.yali.次高压+=1;break;
              case "高压":this.yali.高压+=1;break;
              case "超临界":this.yali.超临界+=1;break;
              case "超超临界":this.yali.超超临界+=1;break;
              default:break;
            }

          }
          console.log(this.yali);

        },

        indexMethod(index){
          return (this.currentPage-1)*this.pagesize+index+1
        },
        async pageSizeChange(pageSize) {
          this.pagesize=pageSize

        },
        // 页数改变
        async pageChange(currentPage) {
          this.currentPage = currentPage

        },
        areaDistributeShow: function () {
          let areaDistribute= {
            option: {
              color: ['#3177c2'],
                title: {
                //show:false,
                left: "center",
                  top: '1%',
                  text: '锅炉地域分布',
                  textStyle: {
                  fontSize: 15,
                    fontWeight: 'bold',
                    color: '#3e7bd6'
                }
              },
              tooltip: {},
              legend: {},
              xAxis: {
                axisLabel: {//文字倾斜
                  interval: 0,
                  rotate: 40
                },
                data: ["山东省", "安徽省","吉林省","浙江省","河南省","河北省","山西省","江苏省","甘肃省"]
              },
              yAxis: {
                  type: 'value',
                  //scale: true,
                  name: '单位：台',
                  minInterval: 1,
                  boundaryGap: [0, 0.1],
                },
              series: [{
                //name: '台',
                barWidth: '30%',
                type: 'bar',
                data: [this.area.山东省,this.area.安徽省,this.area.吉林省,this.area.浙江省,
                  this.area.河南省,this.area.河北省,this.area.山西省,
                  this.area.江苏省,this.area.甘肃省],
                label: {  //图上方显示值
                  normal: {
                    show: true,
                    position: 'top'
                  }
                }
              }]
            },
          };
          var chartDom = document.getElementById('first');
          var myChart = echarts.init(chartDom);
          var option = areaDistribute.option
          myChart.setOption(option);
        }
        ,
        topDevStatisticsShow: function () {
          let topDev={
            option: {
              color: ['#d0961f', 'rgba(14,178,243,0.76)','#d0661f'],
              title: {
                //show:false,
                left: "10%",
                top: '1%',
                text: '锅炉类型',
                textStyle: {
                  fontSize: 15,   //不知道为什么这个设置无效
                  fontWeight: 'bold',
                  color: '#3e7bd6'
                }
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: 'bottom',
                left: 'center',
              },
              series: [{
                radius: '80%',
                type: 'pie',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
                data: [
                  {value: this.pie_objects[0].yjr, name: '有机热载体锅炉'},
                  {value: this.pie_objects[0].cyrs, name: '承压热水锅炉'},
                  {value: this.pie_objects[0].cyzq, name: '承压蒸汽锅炉'},
                ],
                label: {  //图上方显示值
                  normal: {
                    show: true,
                    // formatter: '{c},({d}%)',   //c：值，b:名字，d:百分比
                    //修改饼状图百分比位数
                    formatter:function(data){
                      console.log("dataxianshi"+data)
                      return data.value+',\n  '+data.percent.toFixed(0)+"%"; //取小数点后0位
                    },
                    position:'inside'
                  }
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 30,
                    shadowOffsetX: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            }
          };
          let chartDom1 = document.getElementById('third');
          let myChart2 = echarts.init(chartDom1);
          let option2 = topDev.option
          myChart2.setOption(option2);
        } ,
        usedTimeShow: function () {
          let usedTime= {
            option: {
              color: ['#3177c2'],
                title: {
                //show:false,
                left: "center",
                  top: '1%',
                  text: '锅炉使用年份',
                  textStyle: {
                  fontSize: 15,   //不知道为什么这个设置无效
                    fontWeight: 'bold',
                    color: '#3e7bd6'
                }
              },
              tooltip: {},
              legend: {},
              xAxis: {
                axisLabel: {//文字倾斜
                  interval: 0,
                    rotate: 40
                },
                data: this.useYear
              },
              yAxis: {
                type: 'value',
                  //scale: true,
                  name: '单位：台',
                  minInterval: 1,
                  boundaryGap: [0, 0.1],
              },
              series: [{
                barWidth: '50%',
                type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
                data: this.useYearNum,
                label: {  //图上方显示值
                  normal: {
                    show: true,
                    position: 'top'
                  }
                }
              }]
            }

          };
          var chartDom1 = document.getElementById('second');
          var myChart2 = echarts.init(chartDom1);
          var option2 = usedTime.option
          myChart2.setOption(option2);
        } ,

        nominalVolStatisticsShow: function () {
          let nominalVol={
            option: {
              color: ['#3177c2'],
                title: {
                //show:false,
                left: "center",
                  top: '1%',
                  text: '锅炉压力',
                  textStyle: {
                  fontSize: 15,   //不知道为什么这个设置无效
                    fontWeight: 'bold',
                    color: '#3e7bd6'
                }
              },
              tooltip: {},
              legend: {},
              xAxis: {
                data: ["低压", "中压", "次高压","高压", "超临界", "超超临界"]
              },
              yAxis: {
                type: 'value',
                  //scale: true,
                  name: '单位：°C',
                  minInterval: 1,
                  boundaryGap: [0, 0.1],
              },
              series: [{
                barWidth: '50%',
                type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
                data:[this.yali.低压,this.yali.中亚,this.yali.次高压,
                  this.yali.高压,this.yali.超临界,this.yali.超超临界],
                label: {  //图上方显示值
                  normal: {
                    show: true,
                    position: 'top'
                  }
                }
              }]
            }

          };

          let chartDom1 = document.getElementById('fourth');
          let myChart2 = echarts.init(chartDom1);
          let option2 = nominalVol.option
          myChart2.setOption(option2);
        },
      },

        // 页数改变
       // async pageChange(page) {
        //  console.log('现在是第 ', this.currentPage, ' 页')
         // this.args.offset = (page - 1) * this.args.num
         // this.currentPage = page
         // this.searchData()
       // }


    }
</script>

<style scoped>

</style>
